<template>
    <view class="staffDetails">
        <uni-nav-bar fixed left-icon="left" title="员工名称" @clickLeft="backHandle" class="unibarS">
        </uni-nav-bar>
        <!-- 主要内容 -->
        <view class="info-content">
            <view class="avatar-box">
                <view class="avatar-content">
                    <u-avatar
                        size="70"
                        :src="infoData.avatar">
                    </u-avatar>
                    <view class="name">{{ infoData.userName }}</view>
                    <view class="dept">{{ infoData.dept.deptName }} {{ infoData.dept.leader }}</view>
                </view>
            </view>
            <u--form labelPosition="left" :model="params" ref="uForm" labelWidth="70">
                <view class="item-title">基础信息</view>
                <u-form-item class="item-box" label="性别" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ infoData.sex == 0? '男' : infoData.sex == 1? '女' : '未知' }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="生日" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ infoData.birthday || '---' }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="邮箱" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ infoData.email || '---' }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="手机" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ infoData.phonenumber || '---' }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="微信" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ infoData.wechatId || '---' }}</view>
                    </view>
                </u-form-item>
                <!-- <view class="item-title">更多信息</view>
                <u-form-item class="item-box" label="工号" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ infoData.data.userName }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="籍贯" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ infoData.data.dept.deptName }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="毕业学院" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ infoData.postGroup }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="毕业时间" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ infoData.postGroup }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="学历" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ infoData.postGroup }}</view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="所学专业" ref="item1">
                    <view class="item-temp-box">
                        <view>{{ infoData.postGroup }}</view>
                    </view>
                </u-form-item> -->
            </u--form>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            infoData: {},
            id: null
        }
    },
    onLoad(options) {
        if(options.id) {
            this.id = options.id
            this.getDetails()
        }
    },

    methods: {
        getDetails() {
			this.$http.get('/app/user/' + this.id, {}).then(res => {
                console.log(res)
				if (res.code == 200) {
                    this.infoData = res.data
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>

.staffDetails {
    height: 100vh;
    background: rgba(255, 255, 255, 1);
}

.info-content {
    margin: 20rpx 0;
}

.item-box {
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    padding: 0 32rpx;

    /deep/.u-input__content__field-wrapper__field {
        text-align: right !important;
    }

    .rate-box,
    .item-switch {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

.item-title {
    padding: 48rpx 32rpx 20rpx 32rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(12, 16, 25, 1);
}

.item-temp-box {
    text-align: right;
    width: 100%;
    font-size: 30rpx;

    >view {
        // 超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.item-temp-text-empty {
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(100, 117, 136, 1);
}

.avatar-box {
    margin: 0 32rpx;
    padding: 32rpx 0;
    position: relative;
    height: 310rpx;
    // 设置背景图
    background-image: url('../../static/img/other/bgc.png');
    background-size: 100% 100%;
    .avatar-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 100rpx;
        top: 50%;
        transform: translateY(-50%);
        .name {
            font-size: 40rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
        .dept {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
        }
    }
}
</style>